<template>
    <div>
        <div class="content">
            这是首页内容区域
            <button @click="myClick">获取数据</button>
            <div v-for="(item,index) in msg" :key="item" :index="index">
                {{index+1}}:{{item.date}}:{{item.day}}:{{item.air_level}}
            </div>
        </div>
    </div>
</template>
<script>

import axios from 'axios'
export default {
    data() {
        return {
            msg:[],
            name:"啊哈哈"
        }
    },
    methods:{
        myClick(){
            //   使用了箭头函数，this指向不变，依然是vue
            axios({
                    method: 'get',
                    url: 'http://47.95.123.51:8080/tjj/weather/get',
                    data: {
                        city:"西安"
                    }
                }).then(res=>{
                    console.log(res);
                    var tianqi = res.data.data.data.data;
                    console.log(tianqi);
                    this.msg = tianqi;
                })

            // 没有使用箭头函数，this指向改变了，this代表axios
            // var that = this
            //    axios({
            //         method: 'get',
            //         url: 'http://47.95.123.51:8080/tjj/weather/get',
            //         data: {
            //             city:"西安"
            //         }
            //     }).then(function(res){
                    
            //         console.log(res);
            //         var tianqi = res.data.data.data.data;
            //         console.log(tianqi);
            //         that.msg = tianqi;
                   
            //     })

        }
    }
}
</script>
<style scoped>
    .content{
        width: 1200px;
        /* height: 500px; */
        padding: 20px;
        background-color: yellow;
        margin: 0 auto;
    }
</style>
